<template>
  <div>
    <!-- 原 App.vue 打字练习部分内容（不含导航栏和路由部分） -->
    <!-- 复制 App.vue 中 practice-type-bar 和 typing-container 部分 -->
    <div class="practice-type-bar">
      <button :class="['type-btn', {active: practiceType==='chinese'}]" @click="selectPracticeType('chinese')">中文打字</button>
      <button :class="['type-btn', {active: practiceType==='english'}]" @click="selectPracticeType('english')">英文打字</button>
      <button :class="['type-btn', {active: practiceType==='mix'}]" @click="selectPracticeType('mix')">中英文打字</button>
    </div>
    <div class="typing-container">
      <div class="header">
        <h1>在线打字练习</h1>
        <p class="subtitle">提升打字速度，感受中外文化</p>
      </div>
      <div class="progress-container">
        <div class="progress-bar" :style="{ width: progressPercentage + '%' }"></div>
        <span class="progress-text">{{ progressPercentage }}%</span>
      </div>
      <div class="stats">
        <div class="stat-item">
          <div class="stat-icon">⚡</div>
          <div class="stat-content">
            <span class="stat-label">速度</span>
            <span class="stat-value">{{ wpm }} WPM</span>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon">🎯</div>
          <div class="stat-content">
            <span class="stat-label">准确率</span>
            <span class="stat-value">{{ accuracy }}%</span>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon">⏱️</div>
          <div class="stat-content">
            <span class="stat-label">时间</span>
            <span class="stat-value">{{ timeElapsed }}秒</span>
          </div>
        </div>
      </div>
      <div class="text-display" ref="textDisplay">
        <span
          v-for="(char, index) in textToType"
          :key="index"
          :class="{
            'correct': index < currentIndex && userInput[index] === char,
            'incorrect': index < currentIndex && userInput[index] !== char,
            'current': index === currentIndex
          }"
        >{{ char }}</span>
      </div>
      <div class="input-container">
        <textarea
          ref="inputArea"
          v-model="userInput"
          @input="checkInput"
          placeholder="开始输入..."
          :disabled="isFinished"
          class="typing-input"
        ></textarea>
      </div>
      <div class="controls">
        <button @click="resetExercise" class="reset-btn">
          <span class="btn-icon">{{ isFinished ? '🔄' : '↺' }}</span>
          {{ isFinished ? '重新开始' : '重置' }}
        </button>
      </div>
      <div class="article-info">
        <span class="article-source">当前文章：{{ currentArticleTitle }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TypingPractice',
  data() {
    return {
      practiceType: 'chinese',
      chineseArticles: [/* ...原有中文文章... */{
          title: '论语',
          content: '子曰："学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？"子曰："温故而知新，可以为师矣。"子曰："学而不思则罔，思而不学则殆。"子曰："由，诲女知之乎！知之为知之，不知为不知，是知也。"子曰："见贤思齐焉，见不贤而内自省也。"子曰："三人行，必有我师焉。择其善者而从之，其不善者而改之。"子曰："知之者不如好之者，好之者不如乐之者。"子曰："默而识之，学而不厌，诲人不倦，何有于我哉？"子曰："不愤不启，不悱不发。举一隅不以三隅反，则不复也。"子曰："饭疏食饮水，曲肱而枕之，乐亦在其中矣。不义而富且贵，于我如浮云。"'
        },
        {
          title: '孟子',
          content: '孟子曰："天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。人恒过，然后能改；困于心，衡于虑，而后作；征于色，发于声，而后喻。入则无法家拂士，出则无敌国外患者，国恒亡。然后知生于忧患而死于安乐也。"孟子曰："富贵不能淫，贫贱不能移，威武不能屈，此之谓大丈夫。"孟子曰："老吾老，以及人之老；幼吾幼，以及人之幼。天下可运于掌。"孟子曰："天时不如地利，地利不如人和。三里之城，七里之郭，环而攻之而不胜。夫环而攻之，必有得天时者矣，然而不胜者，是天时不如地利也。"孟子曰："君子以仁存心，以礼存心。仁者爱人，有礼者敬人。爱人者，人恒爱之；敬人者，人恒敬之。"'
        },
        {
          title: '道德经',
          content: '道可道，非常道。名可名，非常名。无名天地之始，有名万物之母。故常无欲，以观其妙；常有欲，以观其徼。此两者，同出而异名，同谓之玄。玄之又玄，众妙之门。天下皆知美之为美，斯恶已。皆知善之为善，斯不善已。故有无相生，难易相成，长短相形，高下相倾，音声相和，前后相随。是以圣人处无为之事，行不言之教；万物作焉而不辞，生而不有，为而不恃，功成而弗居。夫唯弗居，是以不去。不尚贤，使民不争；不贵难得之货，使民不为盗；不见可欲，使民心不乱。是以圣人之治，虚其心，实其腹，弱其志，强其骨。常使民无知无欲。使夫智者不敢为也。为无为，则无不治。'
        },
        {
          title: '诗经',
          content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。'
        },
        {
          title: '兰亭集序',
          content: '永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右。引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至。及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀。况修短随化，终期于尽。古人云："死生亦大矣。"岂不痛哉！'
        },
        {
          title: '桃花源记',
          content: '晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷。渔人甚异之，复前行，欲穷其林。林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田美池桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云："不足为外人道也。"'
        },
        {
          title: '岳阳楼记',
          content: '庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴。乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯；朝晖夕阴，气象万千。此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？若夫霪雨霏霏，连月不开，阴风怒号，浊浪排空；日星隐曜，山岳潜形；商旅不行，樯倾楫摧；薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳；岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。'
        },
        {
          title: '醉翁亭记',
          content: '环滁皆山也。其西南诸峰，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七里，渐闻水声潺潺而泻出于两峰之间者，酿泉也。峰回路转，有亭翼然临于泉上者，醉翁亭也。作亭者谁？山之僧智仙也。名之者谁？太守自谓也。太守与客来饮于此，饮少辄醉，而年又最高，故自号曰醉翁也。醉翁之意不在酒，在乎山水之间也。山水之乐，得之心而寓之酒也。若夫日出而林霏开，云归而岩穴暝，晦明变化者，山间之朝暮也。野芳发而幽香，佳木秀而繁阴，风霜高洁，水落而石出者，山间之四时也。朝而往，暮而归，四时之景不同，而乐亦无穷也。至于负者歌于途，行者休于树，前者呼，后者应，伛偻提携，往来而不绝者，滁人游也。临溪而渔，溪深而鱼肥。酿泉为酒，泉香而酒洌；山肴野蔌，杂然而前陈者，太守宴也。宴酣之乐，非丝非竹，射者中，弈者胜，觥筹交错，起坐而喧哗者，众宾欢也。苍颜白发，颓然乎其间者，太守醉也。'
        },
        {
          title: '赤壁赋',
          content: '壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。于是饮酒乐甚，扣舷而歌之。歌曰："桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。"客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。苏子愀然，正襟危坐，而问客曰："何为其然也？"客曰："月明星稀，乌鹊南飞。此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？""'
        },
        {
          title: '师说',
          content: '古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。吾师道也，夫庸知其年之先后生于吾乎？是故无贵无贱，无长无少，道之所存，师之所存也。嗟乎！师道之不传也久矣！欲人之无惑也难矣！古之圣人，其出人也远矣，犹且从师而问焉；今之众人，其下圣人也亦远矣，而耻学于师。是故圣益圣，愚益愚。圣人之所以为圣，愚人之所以为愚，其皆出于此乎？爱其子，择师而教之；于其身也，则耻师焉，惑矣。彼童子之师，授之书而习其句读者，非吾所谓传其道解其惑者也。句读之不知，惑之不解，或师焉，或不焉，小学而大遗，吾未见其明也。巫医乐师百工之人，不耻相师。士大夫之族，曰师曰弟子云者，则群聚而笑之。问之，则曰："彼与彼年相若也，道相似也。位卑则足羞，官盛则近谀。"呜呼！师道之不复，可知矣。巫医乐师百工之人，君子不齿，今其智乃反不能及，其可怪也欤！'
        }],
      englishArticles: [/* ...原有英文文章... */{
          title: "The Declaration of Independence",
          content: "We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed."
        },
        {
          title: "A Tale of Two Cities",
          content: "It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair."
        },
        {
          title: "Pride and Prejudice",
          content: "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters."
        },
        {
          title: "Gettysburg Address",
          content: "Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. That this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth."
        },
        {
          title: "I Have a Dream",
          content: "I have a dream that one day this nation will rise up and live out the true meaning of its creed: \"We hold these truths to be self-evident, that all men are created equal.\" I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character."
        },
        {
          title: "Edison on Success",
          content: "Genius is one percent inspiration and ninety-nine percent perspiration. Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time."
        },
        {
          title: "Einstein on Life",
          content: "Life is like riding a bicycle. To keep your balance, you must keep moving. Imagination is more important than knowledge. For knowledge is limited, whereas imagination embraces the entire world."
        },
        {
          title: "The Fox and the Grapes",
          content: "Once upon a time, there was a fox who was very hungry. He searched everywhere for food, but he could not find any. At last, he saw a bunch of grapes hanging from a vine. He tried to reach them, but they were too high. He jumped and jumped, but still could not reach them. Finally, he gave up and walked away, saying, 'Those grapes are probably sour anyway.' This story teaches us that it is easy to despise what you cannot have."
        }],
      mixArticles: [/* ...原有中英混合文章... */{
          title: "中英混合经典1",
          content: "Success belongs to those who never give up. 成功属于不放弃的人。Believe in yourself, 相信自己。Opportunities are always reserved for those who are prepared. 机会总是留给有准备的人。"
        },
        {
          title: "中英混合经典2",
          content: "Reading is a good habit. 读书破万卷，下笔如有神。Keep going, 不要轻言放弃。Happiness is not something ready made. It comes from your own actions. 幸福不是现成的东西，它来自你的行动。"
        },
        {
          title: "中英混合经典3",
          content: "Learning never exhausts the mind. 学无止境。The journey of a thousand miles begins with a single step. 千里之行，始于足下。Practice makes perfect. 熟能生巧。"
        },
        {
          title: "中英混合经典4",
          content: "Don't watch the clock; do what it does. Keep going. 不要盯着时钟看，要像时钟一样前进。Great works are performed not by strength, but by perseverance. 伟大的事业是靠坚持不懈完成的。"
        },
        {
          title: "中英混合经典5",
          content: "The only limit to our realization of tomorrow is our doubts of today. 实现明天理想的唯一障碍是今天的疑虑。Courage is grace under pressure. 勇气是在压力下展现的优雅。"
        }],
      textToType: '',
      currentArticleTitle: '',
      userInput: '',
      startTime: null,
      timeElapsed: 0,
      timer: null,
      isFinished: false,
      wpm: 0,
      accuracy: 100,
    }
  },
  computed: {
    currentIndex() {
      return this.userInput.length
    },
    progressPercentage() {
      return Math.round((this.currentIndex / this.textToType.length) * 100)
    }
  },
  methods: {
    getRandomArticle() {
      let articleArr = this.chineseArticles;
      if (this.practiceType === 'english') articleArr = this.englishArticles;
      if (this.practiceType === 'mix') articleArr = this.mixArticles;
      const randomIndex = Math.floor(Math.random() * articleArr.length)
      const article = articleArr[randomIndex]
      this.currentArticleTitle = article.title
      return article.content
    },
    selectPracticeType(type) {
      this.practiceType = type;
      this.resetExercise();
    },
    checkInput() {
      if (!this.startTime) {
        this.startTime = Date.now()
        this.startTimer()
      }
      if (this.currentIndex >= this.textToType.length) {
        this.finishExercise()
      }
      this.calculateStats()
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.timeElapsed = Math.floor((Date.now() - this.startTime) / 1000)
      }, 1000)
    },
    calculateStats() {
      const words = this.userInput.trim().split(/\s+/).length
      const minutes = this.timeElapsed / 60
      this.wpm = Math.round(words / minutes) || 0
      let correctChars = 0
      for (let i = 0; i < this.currentIndex; i++) {
        if (this.userInput[i] === this.textToType[i]) {
          correctChars++
        }
      }
      this.accuracy = Math.round((correctChars / this.currentIndex) * 100) || 100
    },
    finishExercise() {
      this.isFinished = true
      clearInterval(this.timer)
    },
    resetExercise() {
      this.textToType = this.getRandomArticle()
      this.userInput = ''
      this.startTime = null
      this.timeElapsed = 0
      this.isFinished = false
      this.wpm = 0
      this.accuracy = 100
      clearInterval(this.timer)
      this.$refs.inputArea && this.$refs.inputArea.focus()
    }
  },
  mounted() {
    this.textToType = this.getRandomArticle()
    this.$refs.inputArea && this.$refs.inputArea.focus()
  }
}
</script>
<style scoped>
/* 如需复用样式，可将通用样式提取到 assets/common.css 并在此 import */
</style> 